<!DOCTYPE html>
<html>
<head>
    <title>省市联动</title>
    <link rel="stylesheet" href="http://www.12301.cc/css/common/kissy-css-reset.css"/>
    <link rel="stylesheet" href="http://www.12301.cc/css/common/www.12301.cc.global.css"/>
    <link rel="stylesheet" href="http://www.12301.cc/tpl/ui/common/ui_common.css"/>
    <style type="text/css">
        .ui-select-trigger{ height:26px; width:300px;}
        .ui-select-trigger:focus{ outline:none}
        .ui-selectPopContainer{ display:none; position:absolute; top:0; right:0; bottom:0; left:0}
        .ui-selectPopBox{ position:absolute; overflow:hidden; background-color:#fff}
        .ui-selectPopBox .ui-selectPopBox-con{ position:relative; height:100%; overflow:hidden; border-top:0 none}
        .ui-selectPopBox .searchBox{ padding:7px 10px; border-bottom:1px solid #dbdbdb}
        .ui-selectPopBox .searchBox .con{ position:relative; height:32px; padding-left:30px;}
        .ui-selectPopBox .ui-select-searchInp{ display:block; height:100%; line-height:26px; width:100%; border:0 none; background:none}
        .ui-selectPopBox .ui-select-searchInp:focus{ color:#f37138; outline:none}
        .ui-selectPopBox .ui-select-searchIcon{ display:block; position:absolute; top:9px; left:8px;}
        .ui-selectPopBox .ui-select-listUl-con{ position:absolute; left:0; right:0; bottom:0; top:50px; overflow:auto;}
        .ui-selectPopBox .ui-select-option{ height:38px; line-height:38px; padding:0 12px; overflow:hidden; border-bottom:1px solid #dbdbdb; cursor:pointer}
        .ui-selectPopBox .ui-select-option:hover{ background-color:#fcfcfc}
    </style>
</head>
<body style="padding:100px">
    <input id="cityInp" class="cityInp ui-select-trigger ui-textInp ui-radius ui-shadow" type="text"/>
    <span class="ui-select-iconBtn"></span>
<script type="text/javascript" src="http://www.12301.cc/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://wx.12301.cc/public/js/build/common.min.js"></script>
    <script type="text/javascript" src="http://www.12301.cc/tpl/prov_city_select/build/v0.1/pft.ui.select.js"></script>
    <script type="text/javascript">
        var a = new PFT.UI.Select({
            triggerInp : $("#cityInp"),
            paramId : "id",
            tpl : function(){
                return '<li class="ui-select-option" data-id="<%=id%>"><span class="t"><%=text%></span></li>';
            },
            isFilter : false,
//            filter : function(data,keyword){
//                var res = [];
//                for(var i in data){
//                    var d = data[i];
//                    var text = d["text"];
//                    if(text.indexOf(keyword)>-1) res.push(d);
//                }
//                return res;
//            },
            data : [{
                id : 1,
                text : "福建12"
            },{
                id : 1,
                text : "福建fga"
            },{
                id : 1,
                text : "福建566212"
            },{
                id : 1,
                text : "厦门"
            },{
                id : 1,
                text : "漳州"
            },{
                id : 1,
                text : "泉州"
            },{
                id : 1,
                text : "龙岩"
            },{
                id : 1,
                text : "南平"
            },{
                id : 1,
                text : "宁德"
            },{
                id : 1,
                text : "三明"
            }]
        });



    </script>
</body>
</html>